import React from 'react';
import '../../App.css';
import 'antd/dist/antd.css'
import './productcollection.css'
import Production from "../Production/Production";
import {Row,Col,Typography} from 'antd'
interface PropsType{
    title:string;
    sideimg:string;
    products:any[];
}
export const ProductCollection: React.FC<PropsType>=({title,sideimg,products})=>{
    return (
        <div className="productcollection">
            <Typography.Title type="success" style={{marginLeft:'20px'}}>{title}</Typography.Title>
            <Row>
                <Col span={4}>
                    <img src={sideimg} width={190}/>
                </Col>
                <Col span={20}>
                    <Row>
                        <Col span={12}>
                            <Production id={products[0].id}
                                        size={"large"}
                                        title={products[0].title}
                                        imgsrc={products[0].touristRoutePictures[0].url}
                                        price={products[0].price}></Production>
                        </Col>
                        <Col span={12}>
                            <Row>
                                <Col span={12}>
                                    <Production id={products[1].id}
                                                size={"small"}
                                                title={products[1].title}
                                                imgsrc={products[1].touristRoutePictures[0].url}
                                                price={products[1].price}></Production>
                                </Col>
                                <Col span={12}>
                                    <Production id={products[2].id}
                                                size={"small"}
                                                title={products[2].title}
                                                imgsrc={products[2].touristRoutePictures[0].url}
                                                price={products[2].price}></Production>
                                </Col>
                            </Row>
                            <Row>
                                <Col span={12}>
                                    <Production id={products[3].id}
                                                size={"small"}
                                                title={products[3].title}
                                                imgsrc={products[3].touristRoutePictures[0].url}
                                                price={products[3].price}></Production>
                                </Col>
                                <Col span={12}>
                                    <Production id={products[4].id}
                                                size={"small"}
                                                title={products[4].title}
                                                imgsrc={products[4].touristRoutePictures[0].url}
                                                price={products[4].price}></Production>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={6}>
                            <Production id={products[5].id}
                                        size={"small"}
                                        title={products[5].title}
                                        imgsrc={products[5].touristRoutePictures[0].url}
                                        price={products[5].price}></Production>
                        </Col>
                        <Col span={6}>
                            <Production id={products[6].id}
                                        size={"small"}
                                        title={products[6].title}
                                        imgsrc={products[6].touristRoutePictures[0].url}
                                        price={products[6].price}></Production>
                        </Col>
                        <Col span={6}>
                            <Production id={products[7].id}
                                        size={"small"}
                                        title={products[7].title}
                                        imgsrc={products[7].touristRoutePictures[0].url}
                                        price={products[7].price}></Production>
                        </Col>
                        <Col span={6}>
                            <Production id={products[8].id}
                                        size={"small"}
                                        title={products[8].title}
                                        imgsrc={products[8].touristRoutePictures[0].url}
                                        price={products[8].price}></Production>
                        </Col>
                    </Row>
                </Col>
            </Row>
        </div>
    )
}

